<template>
  <div>
    <!-- table数据展示 start -->
    <el-row>
      <el-col :span="24">
        <el-table
          ref="confirm-details-sku-table"
          empty-text
          fit
          size="mini"
          :span-method="objectSpanMethod"
          :data="tableData">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.location.locationcode')" width="100"></el-table-column>
          <el-table-column align="center" prop="productspeccode" label="SKU" width="100"></el-table-column>
          <el-table-column align="center" prop="storage" :label="$t('m.pick.inventory')" width="100"></el-table-column>
          <el-table-column align="center" prop="checkqty"  :label="$t('m.initInventory.initialquantity')" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.checkqty===''"><span class="warning-color">{{$t('m.inventory.notentered')}}</span></template>
              <template v-else>{{scope.row.checkqty}}</template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="unpackedstorage" :label="$t('m.initInventory.packed')" width="100"></el-table-column>
          <el-table-column align="center" :label="$t('m.inventory.differences')" width="100">
            <template slot-scope="scope">
              <template v-if="!scope.row.checkqty&&scope.row.checkqty!==0">-</template>
              <template v-else>
                <span style="color:#f56c6c">
                  {{(scope.row.checkqty+scope.row.unpackedstorage>scope.row.storage)?'+':''}}
                  {{(scope.row.checkqty+scope.row.unpackedstorage-scope.row.storage)}}
                </span>
              </template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="productname" :label="$t('m.in.productname')"></el-table-column>
          <el-table-column align="center" prop="productspec" :label="$t('m.in.productspec')" width="200"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->
  </div>
</template>
<script>
export default {
  name:'details-age-table',
  props:['detail'],
  data(){
    return {
      tableData:[],
      getMergeRows:[]
    }
  },
  mounted(){
    this.tableData = this.detail
    this.tableData.sort((prev,next)=>{
      return prev.initialstocktakedetailid - next.initialstocktakedetailid
    })
    let __index = 0
    let code = ''
    this.tableData.forEach((item,index)=>{
      if(!item.productspeccode){
        this.getMergeRows.push(1)
      } else if(item.productspeccode !== code){
        this.getMergeRows.push(1)
        code = item.productspeccode
        __index = index
      } else {
        if(code){
          ++this.getMergeRows[__index]
          this.getMergeRows.push(0)
        }
      }
    })
  },
  methods:{
    // 表格缩进
    objectSpanMethod({ rowIndex, columnIndex }){
      let MergeArr = [1,7,8]
      if (MergeArr.includes(columnIndex)){
        if(!this.getMergeRows.length){
          return {
            rowspan:1,
            colspan:1
          }
        } else {
          return {
            rowspan:this.getMergeRows[rowIndex],
            colspan:this.getMergeRows[rowIndex] ? 1 : 0
          }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table{margin: 20px 0;}
</style>